<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>4.4.1 fix-footer rem 弹性布局</title>

		<link rel="stylesheet" href="css/common.css">

		<style>

		</style>
	</head>
	<!-- 
 
	main 的高度为啥是0 ？ 
	
	contanier 高度也是零？  
	
	ul 明明是有高度的，为啥 不能撑起来 父元素呢？ 
	底部 被挡住的问题 ，没有解决 TODO
 -->
	<body>



		<div class="container">


			<div class="top">
				<img id="brand" src="img/brand.png" alt="" srcset="">
			</div>


			<div class="main">

				<ul>
					<li>
						<div>
							<img src="img/class-01.png" alt="" class="class-logo">
						</div>
						<div>快速掌握前端必会的 7 种设计模式</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-02.png" alt="" class="class-logo">
						</div>
						<div>产品经理电商系统实战，全面掌握前后端设计精髓目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-03.png" alt="" class="class-logo">
						</div>
						<div>2022全新版-Java分布式架构设计与开发实战</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>
					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


				</ul>


			</div>

			<div class="footer">
				<div>
					<img src="img/home.png" alt="" srcset="">
				</div>
				<div>
					<img src="img/short-cart2.png" alt="" srcset="">
				</div>

			</div>

		</div>


		<script src="js/main.js"></script>
		<script src="js/fix_bottom.js"></script>

	</body>
</html>
